$(function() {
    $('<div class="container"></div>').prependTo('body').append($('#content'));
    $(`<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <span class="navbar-brand" href="#"><img width="40px" src="images/site.png"/></span>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
    <li class="nav-item active">
    <a class="nav-link" href="/">主页</a>
    </li>
    <li class="nav-item">
    <a class="nav-link " href="/docs/extensions">Chrome Extensions文档</a>
    </li>
    <li class="nav-item">
    <a class="nav-link disabled" href="#"></a>
    </li>
    <li class="nav-item">
      <button id="toggle-mode" class="btn btn-dark">夜晚<buttont>
    </li>
    </ul>
    </div>
    </div>
    </nav>`).prependTo('body');
    let $content = $('#content').addClass('card my-3');
    $content.find('h1').addClass('card-header');
    $content.find('p').addClass('card-text');
    $content.children(':not(h1,h2,h3,h4,h5,h6,ul)').addClass('card-body');
    $content.find('.outline-2 h2').addClass('card-title');

    let $postamble = $('#postamble');
    $postamble.appendTo('#content').addClass('card-footer').children().addClass('d-inline');

    $postamble.find('a').addClass('card-link');

    $('#content > .org-ul').addClass('list-group list-group-flush').find('li').addClass('list-group-item')


    $('button:has(span.badge)').on('click', {count:0}, function(e) {
	let dianzan = $(this).find('span.badge');
	e.data.count += 1;
	dianzan.text(e.data.count);
    });

    let night = /night=([^&]*)/.exec(window.location.search);
    mode = {night: night ? night[1] : 'false'};
    function handleNight(night) {
	if (night!='true') {
	    $("body").css({
	    }).removeClass('bg-dark');
	    $("#content").css({
	    }).removeClass('bg-dark text-white');
	  /* $('#toggle-mode').text('夜晚').removeClass('btn-light'); */
	    $('.list-group-item').removeClass('bg-dark');
	} else {
	    $('#content').css({
		"transition-property": "background",
		transition: "1s",
	    }).addClass('bg-dark text-white');
	    $("body").css({
		"transition-property": "background",
		transition: "1s"
	    }).addClass('bg-dark');
	  /* $('#toggle-mode').text('白天').addClass('btn-dark'); */
	    $('.list-group-item').addClass('bg-dark');
	}
	$.each($('a'), function(i, n) {
	    this.search = `?night=${mode.night}`;
	});
	mode.night = mode.night == 'true' ? 'false' : 'true';
    };
    $('#toggle-mode').click(function(e) {
	handleNight(mode.night);
    });

    handleNight(mode.night);
});
